<template>
  <div class="drawer">
    <div>
      <el-drawer title="我是标题" :visible.sync="drawerVisible" :with-header="false">
        <div class="drawer">
          <div class="drawer_head">
            <div class="tel">
              <p>{{ title }}</p>
              <i class="el-icon-close" @click="close"></i>
            </div>
          </div>
          <div class="drawer_count">


            <slot></slot>

            <div class="drawer_button">
              <div class="drawer_button_count">
                <el-button type="primary" @click="onSubmit">确认</el-button>
              <el-button @click="close">取消</el-button>
              </div>
            </div>

          </div>
        </div>
      </el-drawer>
    </div>
  </div>
</template>
  
<script>
export default {
  name: 'Drawer',
  data() {
    return {
      drawerVisible: false,
    };
  },
  props: ['title'],
  methods: {
    openDrawer() {
      this.drawerVisible = true;
    },
    closeDrawer() {
      this.drawerVisible = false;
    },
    close() {
      this.drawerVisible = false;
    },
    onSubmit() {
      console.log('submit!');
    }
  },
};

</script>
  
<style lang="scss" scoped>
.drawer {
  .drawer_head {
    border-bottom: 1px solid #E5E5E5;

    .el-icon-close {
      line-height: 50px;
    }

    .tel {
      width: calc(100% - 40px);
      margin: 0 auto;
      display: flex;
      height: 50px;
      justify-content: space-between;
      align-content: center;
    }
  }

  .drawer_count {
    width: calc(100% - 40px);
    margin: 20px auto 0 auto;
  }

  .drawer_button {
    position: fixed;
    bottom: 0px;
    right: 0;
    width: 30%;
    height: 60px;
    border-top: 1px solid #E5E5E5;
.drawer_button_count{
      position: absolute;
      right: 20px;
      height: 100%;
      display: flex;
      align-items: center;

}
  }

}
</style>
  